@use './variables' as *
@use '../../styles/tools'
@use 'sass:math'
@use 'sass:selector'

@include tools.layer('components')
  .v-file-input
    &--hide.v-input
      .v-field,
      .v-input__control,
      .v-input__details
        display: none

      .v-input__prepend
        grid-area: control
        margin: 0 auto

    &--chips.v-input--density-compact
      .v-field--variant-solo,
      .v-field--variant-solo-inverted,
      .v-field--variant-filled,
      .v-field--variant-solo-filled
        .v-label.v-field-label
          &--floating
            top: 0px

    .v-field__input
      word-break: break-word

    input[type="file"]
      height: 100%
      left: 0
      opacity: 0
      position: absolute
      top: 0
      width: 100%
      z-index: 0

    &--dragging input[type="file"]
      z-index: 1

    .v-input__details
      padding-inline: $file-input-details-padding-inline
      @at-root #{selector.append('.v-input--plain-underlined', &)}
        padding-inline: 0
